<template>
	<view class="content">
		<view class="head">
			<image class="avatar" src="@/static/img/ava.jpg" mode=""></image>
			<!-- <u-avatar :text="baseInfo.username.slice(0,1)" size="50" shape="circle" class="avatar" randomBgColor></u-avatar> -->
			<!-- <image class="avatar" v-if="!baseInfo.avatar" src="https://www.bjroyalkitchen.com/images/root/eee222fff333444.png" mode=""></image> -->
			<!-- <image class="avatar" v-else :src="baseInfo.avatar" mode=""></image> -->
			<view class="personInfo">
				<view class="account" @click="toLogin">{{ baseInfo.username }}</view>
				<view class="account">{{ baseInfo.cellphone }}</view>
				<view class="account">{{ baseInfo.repairMemo }}</view>
				<!-- <view class="account renzheng" v-if="baseInfo.username">已实名认证</view> -->
			</view>
			<!-- <view class="auth" v-if="baseInfo.qualificationsStatus">
				<u-tag
					:text="
						baseInfo.qualificationsStatus == null ? '待认证' : baseInfo.qualificationsStatus == 1 ? '审核中' : baseInfo.qualificationsStatus == 2 ? '审核完成' : '审核失败'
					"
					shape="circleLeft"
					:type="baseInfo.qualificationsStatus == null ? 'error' : baseInfo.qualificationsStatus == 2 ? 'success' : 'warning'"
				/>
				<image style="width: 20px; height: 25px; margin-left: 10rpx" src="../../static/img/back.png" mode=""></image>
			</view> -->
		</view>

		<view class="operation">
			<!-- 项目管理 -->
			<!-- <view class="project_admin">
				<view class="project_title" style="margin-top: 30rpx; margin-bottom: 30rpx">
					<text>项目管理</text>
				</view>
				<view class="project_content">
					<view style="display: flex; justify-content: space-around; width: 702rpx">
						<view @click="toTransfer(0)">
							<view class="top">{{ CaluItem.traTotal }}</view>
							<view class="bottom">验收移交</view>
						</view>
						<view @click="toTransfer(1)">
							<view class="top">{{ CaluItem.traFinish }}</view>
							<view class="bottom">已完成</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 报修订单 -->
			<view class="orders_type">
				<view class="myOrder_title">
					<text>报修订单</text>
				</view>
				<view class="myOrder_list">
					<view class="myOrder_list_item" @click="to_orderList(1)">
						<view class="item_img">
							<image src="../../static/img/tip1.png"></image>
						</view>
						<view class="tips" v-if="conductshow">{{ RepairOrder.tips_cond }}</view>
						<view class="item_text">已接单</view>
					</view>
					<!-- <view class="myOrder_list_item" @click="to_orderList(2)">
						<view class="tips" v-if="conductshow">{{ tips_conduct }}</view>
						<view class="item_img">
							<image src="../../static/img/tip2.png"></image>
						</view>
						<view class="tips" v-if="accessory">{{ RepairOrder.tips_accessory }}</view>
						<view class="item_text">配件确认</view>
					</view> -->
					<view class="myOrder_list_item" @click="to_orderList(2)">
						<view class="item_img">
							<image src="../../static/img/tip3.png"></image>
						</view>
						<view class="tips" v-if="repair">{{ RepairOrder.tips_repair }}</view>
						<view class="item_text">已预约</view>
					</view>
					<view class="myOrder_list_item" @click="to_orderList(3)">
						<view class="item_img">
							<image src="../../static/img/tip5.png"></image>
						</view>
						<view class="tips" v-if="confirmmoney">{{ RepairOrder.tips_confirmmoney }}</view>
						<view class="item_text">已到达</view>
					</view>
					<view class="myOrder_list_item" @click="to_orderList(4)">
						<view class="item_img">
							<image src="../../static/img/tip4.png"></image>
						</view>
						<view class="tips" v-if="evalshow">{{ RepairOrder.tips_evalshow }}</view>
						<view class="item_text">已完成</view>
					</view>
				</view>
			</view>
		</view>

		<view class="group">
			<u-cell-group>
				<u-cell size="large" icon="account-fill" title="我的账户" @click="account" isLink>
					<image style="width: 50rpx; height: 50rpx; margin-right: 20rpx" slot="icon"
						src="@/static/img/user_account.png"></image>
				</u-cell>
				<u-cell size="large" icon="info-circle" title="电话客服" @click="kefu_cell" isLink>
					<image style="width: 42rpx; height: 42rpx; margin-right: 20rpx" slot="icon" src="@/static/img/kefu.png">
					</image>
				</u-cell>
				<!-- <u-cell size="large" icon="lock-fill" title="修改密码" @click="account" isLink>
					<image style="width: 42rpx; height: 42rpx; margin-right: 20rpx" slot="icon"
						src="@/static/img/modify_password.png"></image>
				</u-cell>
				<u-cell size="large" icon="setting-fill" title="维修订单" @click="toOrderList" isLink>
					<image style="width: 42rpx; height: 42rpx; margin-right: 20rpx" slot="icon"
						src="@/static/img/user_orders.png"></image>
				</u-cell>
				<u-cell size="large" icon="server-fill" title="巡检订单" @click="service_center" isLink>
					<image style="width: 42rpx; height: 42rpx; margin-right: 20rpx" slot="icon" src="@/static/img/sis_order.png"></image>
				</u-cell>
				<u-cell size="large" icon="info-circle" isLink>
					<image style="width: 42rpx; height: 42rpx; margin-right: 20rpx" slot="icon" src="@/static/img/kefu.png"></image>
					<button
						class="btn"
						type="default"
						open-type="contact"
						@contact="contacts"
						slot="title"
					>
						在线客服
					</button>
				</u-cell> -->
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		clearStorageSync,
		setStorageSync,
		getStorageSync,
		useRouter
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				baseInfo: {
					avatar: 'https://www.bjroyalkitchen.com/images/root/eee222fff333444.png',
					cellphone: '',
					customerAddress: '',
					customerName: '',
					username: '请登录',
					repairMemo: '',
				},
				version: '',
				loading: false,

				CaluItem: {
					traTotal: '4',
					traFinish: '6'
				}
			};
		},
		onLoad() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.version = res.appVersion;
				}
			});
		},
		onReady() {
			setTimeout(() => {
				this.loading = false;
			}, 500);
		},
		onShow() {
			uni.$on('refresh', (e) => {
				uni.$off('refresh');
			});

			this.baseInfo.cellphone = getApp().globalData.repairPhone;
			this.baseInfo.repairMemo = getApp().globalData.repairMemo;
			// this.baseInfo.customerAddress = getApp().globalData.repairCity;
			// this.baseInfo.customerName = getApp().globalData.customerName;
			this.baseInfo.username = getApp().globalData.nickName || '请登录';
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.stopPullDownRefresh(); //停止刷新
		},

		methods: {
			to_orderList(index) {
				uni.navigateTo({
					url: '/pagesIndex/order/order1?index=' + index
				});
			},
			toTransfer(e) {
				uni.navigateTo({
					url: `/pagesIndex/projectAdmin/projectAdmin?tabIndex=${e}`
				});
			},
			toOrderList() {
				uni.navigateTo({
					url: '/pagesIndex/order/order1'
				});
			},
			kefu_cell() {
				uni.makePhoneCall({
					phoneNumber: '1234567',
					complete() {}
				});
			},
			toLogin(e) {
				if (e._relatedInfo.anchorTargetText == '请登录') {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			upload_avatar() {
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: _this.$API_BASE_URL + '/api/index/upload_cos',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								floder: 'avatar'
							},
							success: (uploadFileRes) => {
								//let retData = JSON.parse(uploadFileRes)

								let retData = JSON.parse(uploadFileRes.data);
								console.log('up:', retData);
								const _data = {
									avatar: retData.data.file
								};
								_this.$api.baseInfoSave(_data).then((ret) => {
									if (ret.code == 1) {
										_this.baseInfo.avatar = retData.data.file;
									} else {
										toast(res.msg);
									}
								});
							}
						});
					}
				});
			},
			profile() {
				useRouter('/pages/my/profile', {}, 'navigateTo');
			},
			account() {
				useRouter('/pagesTwo/account/index', {}, 'navigateTo');
			},
		}
	};
</script>

<style lang="scss" scoped>
	/* ::v-deep .u-cell {
	padding: 10rpx 0 !important;
} */
	::v-deep .u-text__value {
		font-size: 42rpx !important;
	}

	.content {
		height: 100vh;
		//https://www.bjroyalkitchen.com/images/root/12345678.png
		background-image: url(https://i-blog.csdnimg.cn/direct/41a22387981f4194815ee8d25794652c.jpeg);
		background-repeat: no-repeat;
		background-size: 100% 26%;

		.head {
			background: transparent;
			display: flex;
			// justify-content: space-around;
			// min-height: 350rpx;
			padding: 30rpx 0 0 40rpx;

			.avatar {
				// margin-top: 4rpx;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

			.personInfo {
				color: #fff;
				// margin-top: 20rpx;
				font-size: 26rpx;
				margin-left: 30rpx;
				line-height: 50rpx;

				.account {
					font-size: 28rpx;
				}
			}

			.auth {
				display: flex;
				text-align: right;
				margin: auto;
				padding-left: 180rpx;
			}
		}

		.group {
			background: #fff;
			margin: 30rpx 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 10px 2px rgba(100,100,100,0.1);

			.btn {
				color: #000;
				background-color: #fff;
				font-size: 16rpx;
				padding-left: 0;
				width: 100%;
				text-align: left;
				height: 20px;
				line-height: 1;
			}
		}

		.operation {
			// width: 100%;
			// height: 1500rpx;
			margin: 30rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			opacity: 0.95;
			box-shadow: 0 0 10px 2px rgba(100,100,100,0.2);

			.orders_type,
			.project_admin {
				width: 100%;
				// height: 220rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				padding: 20rpx 0;
			}

			.orders_type {
				.myOrder_title {
					width: 90%;
					height: 50rpx;
					line-height: 50rpx;
					margin-left: auto;
					margin-right: auto;
					font-size: 28rpx;
				}

				.myOrder_list {
					// width: 90%;
					height: 150rpx;
					margin: 20rpx 0;
					padding-top: 20rpx;
					background: #fff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: row;

					.myOrder_list_item {
						width: 25%;
						height: 150rpx;
						position: relative;

						.item_img {
							width: 100rpx;
							height: 100rpx;
							margin-right: auto;
							margin-left: auto;

							image {
								width: 88rpx;
								height: 88rpx;
								margin: 6rpx 6rpx;
							}
						}

						.item_text {
							width: 100%;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							font-size: 28rpx;
							color: #a2a2a2;
							letter-spacing: 1px;
						}

						.tips {
							background-color: rgb(219, 60, 62);
							border-radius: 50rpx;
							font-size: 22rpx;
							color: #fff;
							height: 20rpx;
							line-height: 20rpx;
							text-align: center;
							position: absolute;
							top: 10rpx;
							right: 25rpx;
							padding: 5rpx 10rpx;
						}
					}
				}

			}

			.project_admin {
				height: auto;

				.project_title {
					margin-bottom: 20rpx;
					width: 90%;
					height: 50rpx;
					line-height: 50rpx;
					margin-left: auto;
					margin-right: auto;
					font-size: 28rpx;
				}

				.project_content {
					// width: 702rpx;
					height: 160rpx;
					margin: 20rpx 0;
					flex-wrap: wrap;
					display: flex;
					background: white;
					border-radius: 20rpx;

					.top {
						text-align: center;
						margin: 25rpx 0 11rpx 0;
						color: rgba(51, 51, 51, 1);
						font-size: 48rpx;
						font-weight: 700;
					}

					.bottom {
						text-align: center;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}
				}
			}
		}

	}

	@media (min-width: 768px) {
		::v-deep .u-cell__title-text {
			font-size: 22rpx !important;
		}

		.btn {
			font-size: 22rpx !important;
			height: 24rpx !important;
		}

		::v-deep .u-tag {
			padding: 2rpx 12rpx !important;
		}

		::v-deep .u-tag__text {
			font-size: 16rpx !important;
		}

		.renzheng {
			font-size: 20rpx !important;
		}
	}

	@media (max-width: 767px) {
		.btn {
			font-size: 16rpx;
			height: 20rpx;
		}
	}
</style>